var left_num = 3, right_num = 2 ** left_num;
var left_boxes  = new Array();
var right_boxes = new Array();
var answer = 0;

function calc(x) {
    if (x) {
        x.innerHTML ^= 1;
        // console.log(x);
    }

    right_boxes[answer].innerHTML = 0;
    right_boxes[answer].style.color = "lightgray";
    answer = 0;
    for (let i = 0; i < left_num; i++) {
        answer += left_boxes[i].innerHTML * (2 ** i);
    }
    right_boxes[answer].innerHTML = 1;
    right_boxes[answer].style.color = "#3a3a3a";

}

let boxes = document.getElementById("left-box");
let texts = document.getElementById("left-text");
for (let i = 0; i < left_num; i++) {
    let box = document.createElement("div");
    box.setAttribute("class", "box");
    // box.setAttribute("id", "in" + i);
    box.setAttribute("onClick", "calc(this)");
    box.innerHTML = 0;
    boxes.appendChild(box);
    left_boxes.push(box);

    let text = document.createElement("p");
    text.setAttribute("class", "text");
    text.innerHTML = "in" + i;
    texts.appendChild(text);
}

boxes = document.getElementById("right-box");
texts = document.getElementById("right-text");
for (let i = 0; i < right_num; i++) {
    let box = document.createElement("div");
    box.setAttribute("class", "box");
    // box.setAttribute("id", "out" + i);
    box.innerHTML = 0;
    boxes.appendChild(box);
    right_boxes.push(box);

    let text = document.createElement("p");
    text.setAttribute("class", "text");
    text.innerHTML = "out" + i;
    texts.appendChild(text);
}

calc();